<script setup>

import router from "@/router/index.js";

import {ref,reactive} from "vue";

const data = reactive({
  user: JSON.parse(localStorage.getItem('localdata') || '{}')
})

const logout = () => {
  localStorage.removeItem('localdata')
  location.href= '/login'

}

let userstr = localStorage.getItem('localdata')
if (userstr){
  let user = JSON.parse(userstr)
  if (!user.id){
    location.href= '/login'
  }
}else {
  location.href = '/login'
}



</script>

<template>
<!--   头部开始-->

  <div style="height: 60px;display: flex" >
    <div style="display: flex; width:240px; align-items: center;padding-left: 20px; background-color: #3a456b">
      <img src="@/assets/imgs/logo.png" style="width: 50px; height: 50px;border-radius: 50% " >
      <span style="font-size: 20px; color: #ffffff; font-weight: bold;margin-left: 5px" >学生信息管理系统</span>
    </div>


    <div style="flex: 1;border-bottom: 1px solid #ddd;box-sizing: border-box;padding-left: 20px;display: flex;align-items: center">
      <span @click = "router.push('/manager/home')" style="margin-right: 5px">首页</span> / <span style="margin-left: 5px">{{router.currentRoute.value.meta.name}}</span>
    </div>
    <div style="width: fit-content; padding-right: 20px;display: flex;align-items: center;border-bottom: 1px solid #ddd">
      <el-dropdown >
       <div style="display: flex; align-items: center">
         <img  style="width: 50px;height: 50px; border-radius: 50%" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
         <span style="margin-left: 5px">{{data.user.name}}</span>
       </div>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登陆</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

    </div>

  </div>

<!--  头部结束-->

<!--  下放区域开始-->
  <div style="display: flex">
  <!--  左边-->
<!--    菜单区域开始-->
    <div style="width: 240px">

          <el-menu router :default-openeds="['1']" :default-active="router.currentRoute.value.path" style="min-height: calc(100vh - 60px)">

            <el-menu-item index="/manager/home" >
              <el-icon><House /></el-icon>
              <span> 首页</span>
            </el-menu-item>

            <el-sub-menu index="1">
               <template #title>
                 <el-icon><location /></el-icon>
                 <span>用户管理</span>
               </template>

              <el-menu-item index="/manager/admin" >管理员信息</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>
                <el-icon><school /></el-icon>
                <span>学校管理</span>
              </template>

              <el-menu-item index="/manager/class" >班级管理</el-menu-item>
              <el-menu-item index="/manager/teacher" >教师管理</el-menu-item>
              <el-menu-item index="/manager/student" >学生管理</el-menu-item>

            </el-sub-menu>




          </el-menu>


    </div>
<!--    菜单区域结束-->

  <!--  右边-->
<!--    数据渲染开始-->
    <div style="flex:1; width: 0px; padding: 10px; background-color: #eadcdb">
      <RouterView />
    </div>
<!--    数据渲染结束-->
  </div>
    <!--  下放区域结束-->



</template>

<style scoped>
.el-menu{
  background-color: #3a456b;
  border: none;
}

/* 添加深度选择器 */
:deep(.el-sub-menu__title) {
  background-color: #3a456b;
  color: #ddd;

}

.el-menu-item{
  color: #ddd;
  height: 56px;
}

.el-menu .is-active{
  background-color: #537bee;
  color: #fff;
}


/* 修正选择器 */
:deep(.el-sub-menu__title:hover) {
  background-color: #3a456b;
}


.el-menu-item:not(.is-active):hover{
  background-color: #536ec3;
  color: #333;
}





</style>